<template>
    <a-table
        :ref="tableRef"
        :columns="columns"
        :data="orderList"
    >
        <template #orderDetailVOS="{ record }">
            <p style="margin: 0" v-for="item in record.orderDetailVOS">
                {{item.foodName}}
                <span style="margin-left: 1.2vw;color: #bbbbbb;font-size: 0.8vw">X{{item.quantity}}</span>
            </p>
        </template>
        <template #totalPrice="{ record }">
            {{
                record.totalPrice.toFixed(2)
            }}
        </template>
        <template #orderState="{ record }">
            <a-badge v-if="record.orderState == 0" status="processing" text="未支付" />
            <a-badge v-if="record.orderState == 1" status="success" text="已支付" />
            <a-badge v-if="record.orderState == 2" status="error" text="已取消" />
        </template>
        <template #createTime="{ record }">
            {{
                moment(record.createTime).format("YYYY-MM-DD")
            }}
        </template>
        <template #optional="{ record }">
            <a-space>
                <a-button type="primary" status="success" size="mini" shape="circle">
                    <icon-check-circle />
                </a-button>
                <a-button type="primary" status="danger" size="mini" shape="circle">
                    <icon-close-circle />
                </a-button>
            </a-space>
        </template>
    </a-table>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import {OrderVO} from "../type/order";
import {list} from "../service/orders.ts";
import moment from "moment/moment";
import {IconCheckCircle,IconCloseCircle} from "@arco-design/web-vue/es/icon";
const tableRef = ref();
const id = defineModel('id', {
    required: true,
    default: 0,
    type: Number
})
const orderList = ref<OrderVO[]>([])
const payOrderNum = ref(0)
const loadData = async () => {
    const res = await list(id.value);
    orderList.value = res.data
    if (orderList.value.length>0){
        //计算已经支付的
        payOrderNum.value = orderList.value.filter(item=>item.orderState === 1).length
    }
}

onMounted(async ()=>{
    await loadData();
})
const columns = [
    {
        title: '订单编号',
        dataIndex: 'id',
    },
    {
        title: '下单用户',
        dataIndex: 'customerId',
    },
    {
        title: '下单商品',
        slotName: 'orderDetailVOS',
    },
    {
        title: '价格',
        slotName: 'totalPrice',
    },
    {
        title: "下单时间",
        slotName: 'createTime',
    },
    {
        title: "订单状态",
        slotName: 'orderState',
    },
    {
        slotName: "optional",
    },
];

</script>

<style scoped>

</style>
